<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
  <title>Administrar Clave Usuario</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <!-- stylesheets -->
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <link href="css/portfolio_one.css" rel="stylesheet" type="text/css" />
  <link href="css/light.css" rel="stylesheet" type="text/css" />
  <!-- we only want the thunbnails to display when javascript is disabled -->
  <script type="text/javascript">
    document.write('<style>.noscript { display: none; }</style>');
  </script>
  <!-- modernizr enables HTML5 elements and feature detects -->
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>

<body>
  <div id="main">

    <!-- begin header -->
    <header>
      <div id="logo"><img src='images/gobierno.png' /> </div>
      <nav>
        <ul class="sf-menu" id="nav">
          <li><a href="index.php">Inicio</a></li>
          <li><a href="form_clave_u.php">Usuario-Trabajador</a></li>
          <li><a href="form_clave_a.php">Administrador Sedole</a></li>
          <li class="selected"><a href="#">Administrador de Clave</a>
            <ul>
              <li><a href="#">Usuario-Trabajador</a>
              	<ul>	<!-- SUBMENU -->
               	  <li><a href='crear_clave_u.php'>Crear Clave</a></li> 
            	  <li><a href='mod_clave_u.php'>Cambio de Clave</a></li>
            	  <li class='last'><a href='recuperar_datos_u.php'>Recuperar Datos</a></li>
               </ul>
              </li>
              <li><a href="#">Administrador Sedole</a>
              	<ul>	<!-- SUBMENU -->
               	  <li><a href='crear_clave_a.php'>Crear Clave</a></li> 
            	  <li><a href='mod_clave_a.php'>Cambio de Clave</a></li>
            	  <li class='last'><a href='recuperar_datos_a.php'>Recuperar Datos</a></li>
                </ul>
              </li>
            </ul>
          </li>
         
        </ul>
      </nav>
    </header>
    <!-- end header -->

    <!-- begin content -->
        <!-- begin content -->
    <div id="site_content">
      <div id="left_content">
<div class="cuadro">
<h1 align="center"> Crear Contraseña Empleado </h1>
		<!--h5> Los campos con (*) son requeridos. </h5-->
		<div class="formu">			    			    			
			<form method="post" action="crear_clave_vari_u.php">
			<table>
				<tr><td><label class="label2" for="cedula">Cedula de Identidad</label></td>
					<td><input class="texto2" type="text" name="cedula" required="" onkeypress="return justNumbers(event);" maxlength="8" placeholder="Ingrese Cedula" /></td>
				</tr>
				<tr><td><label class="label2" for="lusuario">Usuario</label></td>
					<td><input class="texto2" type="text" name="usuario" required="" placeholder="Ingrese Usuario"/></td>
				</tr>
				<tr><td><label class="label2" for="lcorreo">Correo</label></td>
					<td><input  class="texto2" type="text" name="correo" placeholder="Ingrese Correo"/></td>
				</tr>
				<tr><td><label class="label2" for="lcontrasena">Contrase&ntilde;a</label></td>
					<td><input class="texto2" type="password" name="clave" required="" placeholder="Ingrese Contrase&ntilde;a"/></td>
				</tr>
				<tr><td><label class="label2" for="lcontrasena">Confirmar Contrase&ntilde;a</label></td>
					<td><input class="texto2" type="password" name="conf_clave" required="" placeholder="Confirme Contrase&ntilde;a"/></td>
				</tr>
			</table>
			<center><input class="boton" type="submit"name="botton"value="Aceptar"/>
					<a href="pagina_principal.php"><input class="boton" type="button" value="Regresar" name="submit"> </center> 
		</form> 
		</div>
		
		
		</div>
      <div id="right_content">
       <div class="efecto"><img src="images/about1.jpg" width="455" height="450"/> </div>
        <div class="efecto2"><img src="images/about2.jpg" width="455" height="450"/> </div>
      </div>
    </div>
    <!-- end content -->

   

  </div>
  <!-- javascript at the bottom for fast page loading -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
  <script type="text/javascript" src="js/jquery.sooperfish.js"></script>
  <!-- initialise sooperfish menu -->
  <script type="text/javascript">
    $(document).ready(function() {
      $('ul.sf-menu').sooperfish();
    });
  </script>
  <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
  <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      // we only want these styles applied when javascript is enabled
      $('div.navigation').css({'width' : '450px', 'float' : 'left'});
      $('div.content').css('display', 'block');
      // initially set opacity on thumbs and add additional styling for hover effect on thumbs
      var onMouseOutOpacity = 0.67;
      $('#thumbs ul.thumbs li').opacityrollover({
        mouseOutOpacity:   onMouseOutOpacity,
        mouseOverOpacity:  1.0,
        fadeSpeed:         'fast',
        exemptionSelector: '.selected'
      });
      // initialize advanced galleriffic gallery
      var gallery = $('#thumbs').galleriffic({
        delay:                     3500,
        numThumbs:                 10,
        preloadAhead:              10,
        enableTopPager:            false,
        enableBottomPager:         true,
        maxPagesToShow:            7,
        imageContainerSel:         '#slideshow',
        controlsContainerSel:      '#controls',
        captionContainerSel:       '#caption',
        loadingContainerSel:       '#loading',
        renderSSControls:          true,
        renderNavControls:         true,
        playLinkText:              'Play Slideshow',
        pauseLinkText:             'Pause Slideshow',
        prevLinkText:              '&lsaquo; Previous Photo',
        nextLinkText:              'Next Photo &rsaquo;',
        nextPageLinkText:          'Next &rsaquo;',
        prevPageLinkText:          '&lsaquo; Prev',
        enableHistory:             false,
        autoStart:                 false,
        syncTransitions:           true,
        defaultTransitionDuration: 900,
        onSlideChange:             function(prevIndex, nextIndex) {
          // 'this' refers to the gallery, which is an extension of $('#thumbs')
          this.find('ul.thumbs').children()
            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
            .eq(nextIndex).fadeTo('fast', 1.0);
        }
      });
    });
  </script>
</body>
</html>
